
import React, { FC,useEffect, useRef, useState } from 'react'

import { LockOutlined, UserOutlined,EyeInvisibleOutlined
  ,FileProtectOutlined,MailOutlined,ScheduleOutlined,PhoneOutlined
  ,SafetyOutlined
 } from '@ant-design/icons';
import {
  Form,
  Input,
  Button,
  message
} from 'antd';


import ServiceClient, { IRegister }  from '@/app/api/utils/serviceClient';
import { useRouter } from 'next/navigation';
type IRegisterPro={
  onAction:() => void
}

const sApi =new ServiceClient()
const Register:FC<IRegisterPro> = ({
  onAction
}) => {

    const [form] = Form.useForm();

    const onFinish = async ()=>{

      sApi.register(form.getFieldsValue()).then(res=>{

          if(res.data.code===200){
            
              message.success('注册成功！请等待管理员审核通过，大约需要5~10分钟。');
              //跳转首页
              onAction()
          }else{
             message.warning("出现异常，已通知管理员处理中……");
          }
      })

    }
    const onFinishFailed =()=>{
      message.error('注册失败!');
    }

    return (
        <>
          <Form
            form={form}
            className='flex flex-col justify-between'
            onFinishFailed={onFinishFailed}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item label=""
            name="username" rules={[{ required: true, message: '输入用户名' }]}
            >
              <Input  prefix={<UserOutlined />} placeholder="输入用户名"/>
            </Form.Item>
            <Form.Item label=""
            name="password" rules={[{ required: true, message: '输入密码' }]}
            >
              <Input  type="password" prefix={<LockOutlined />} placeholder="输入密码"/>
            </Form.Item>
            <Form.Item label=""
            name="repassword" rules={[{ required: true, message: '输入重复密码' }]}
            >
              <Input   type="password" prefix={<LockOutlined />} placeholder="输入重复密码"/>
            </Form.Item>
            <Form.Item label=""
            name="email" rules={[{ required: true, message: '请输入电子邮箱' }]}
            >
              <Input  prefix={<MailOutlined />} placeholder="输入电子邮箱"/>
            </Form.Item>
            <Form.Item label=""
            name="full_name" rules={[{ required: true, message: '输入姓名' }]}
            >
              <Input  prefix={<ScheduleOutlined />} placeholder="输入姓名"/>
            </Form.Item>
            <Form.Item label=""
            name="phone" rules={[{ required: true, message: '输入手机号' }]}
            >
              <Input  prefix={<PhoneOutlined />} placeholder="输入手机号"/>
            </Form.Item>
            <Form.Item label=""
            name="id_card" rules={[{ required: true, message: '输入身份证' }]}
            >
              <Input  prefix={<SafetyOutlined />} placeholder="输入身份证"/>
            </Form.Item>
            <Form.Item label=""
            name="organization" rules={[{ required: true, message: '输入单位名称' }]}
            >
              <Input  prefix={<FileProtectOutlined />} placeholder="输入单位名称"/>
            </Form.Item>
             <Form.Item>
                <Button type='primary' className=' w-full text-center' htmlType="submit">注册</Button>
             </Form.Item> 
          </Form>
        
          
        </>
      );
}
export default Register